<div class="container">
    <div class="row">
        <div class="col-sm">
            <a class="btn btn-primary" href="#" *ngIf="Show" [ngClass]="{bordered:isBordered,round:true}" (click)="toggleBorder()">
                <nav class="nav flex-column">
                    <ul>
                        <ng-container *ngFor="let list of caidan">
                            <li *ngIf="Show1">{{list.n1}}</li>
                            <li *ngIf="Show2">{{list.n2}}</li>
                            <li *ngIf="Show3">{{list.n3}}</li>
                            <li *ngIf="Show4">{{list.n4}}</li>
                        </ng-container>
                    </ul>
                </nav>
            </a>
        </div>
        <div class="col-sm">
            <div>
                <input type="button" value="显示/隐藏" (click)="onToggle()">
            </div>
            <div>
                <input type="button" value="导航菜单" (click)="onToggle1()">
            </div>
            <div>
                <input type="button" value="背景" (click)="onToggle2()">
            </div>
            <div>
                <input type="button" value="咨询" (click)="onToggle3()">
            </div>
            <div>
                <input type="button" value="页面内容" (click)="onToggle4()">
            </div>
        </div>
    </div>
</div>